<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>app管理|<{$configcache['Title']}></title>
    <link rel="stylesheet" type="text/css" href="__CSS__/content.css"  />
    <link rel="stylesheet" type="text/css" href="__CSS__/public.css"  />
    <script type="text/javascript" src="__JS__/jquery.js"></script>
    <script type="text/javascript" src="__JS__/Public.js"></script>
    <script type="text/javascript" src="__JS__/winpop.js"></script>
    <script type="text/javascript" src="__JS__/check.js"></script>
    <script type="text/javascript" src="__JS__/jquery-form.js"></script>
    <link rel="stylesheet" href="__JS__/Validform/images/style.css" type="text/css" media="all" /> 
    <script type="text/javascript" src="__JS__/Validform/images/jquery-1.9.1.min.js"></script> 
    <script type="text/javascript" src="__JS__/Validform/images/Validform_v5.3.2.js"></script> 
    <script type="text/javascript" src="__JS__/Validform/plugin/passwordStrength/passwordStrength-min.js"></script> 
    <script src="__JS__/jquery-form.js" type="text/javascript"></script>
    <script type="text/javascript" src="__JS__/layer/layer.js"></script>
    <link rel="stylesheet" type="text/css" href="__JS__/layer/skin/layer.css" />
    <style type="text/css" >
        .dd_left{margin-top: 5px;}
        .dtext{text-align: center;}
        #preview, .img, img{width:200px;height:200px;}
        #preview{border:1px solid #000;}
        #view{} .imgbox{float:left;position:relative;width:100px;height: 100px;margin-left: 10px;margin-top: 10px;
          padding:5px;border:solid 1px #ccc;border-radius: 5px;;}
        #view{} .imgbox .close{border: solid 1px #ccc;position: absolute;top: -15px;
              width: 20px;height: 20px; display: inherit;cursor: pointer;text-align: center;background: red;color: #fff;right: -10px;z-index: 20;border-radius: 100%;}
        #view{} .imgbox input{width:100%;height: 100%;z-index: 10;}
        .tablecon{width: 800px; margin-left:80px;}
        .registerform{width:700px;height:565px;margin:20px;border:1px solid #bcd4e5;}
    </style> 
    <script type="text/javascript">
          $(function(){
            $(".registerform").Validform({
                tiptype:2,
                /*表单验证*/
                tiptype:function(msg,o,cssctl){
                    if(!o.obj.is("form")){
                        var objtip=o.obj.parent().find(".Validform_checktip");
                        cssctl(objtip,o.type);
                        objtip.text(msg);

                        var infoObj=o.obj.parent().find(".info");
                        if(o.type==2){
                            infoObj.fadeOut(200);
                        }else{
                            if(infoObj.is(":visible")){return;}
                            layer.closeAll('loading');
                            infoObj.css({
                                left:0,
                                top:-30
                            }).show().animate({
                                top:-27
                            },200);
                        }  
                    }   
                },  
            });
        })
</script> 
</head>
<body>
    <div id="content">
        <h1>首页 > app管理 > banner添加</h1>
        <h2>
            <div class="h2_left">
                <a href="__ACTION__" class="whole">全部</a>
                <a href="javascript:;" class="f5" onclick="f5();">刷新</a>
                <a href="javascript:history.back();" class="Retreat">后退</a>
                <a href="javascript:history.go(1);" class="Advance">前进</a>
            </div>
        </h2>
        <form action="<{$SMART_URL}>/smart/banner/save" method="post" class="registerform" id="form">
            <dl id="cdl">
                <dd>
                    <span class="dd_left">标题:</span>
                    <span class="dd_right">
                        <input type="text" class="qtext" name="titile" value="" id="titile" datatype="*1-200" errormsg="标题名称在1~200位之间！"  nullmsg="请填写标题" />
                        <font class="defi defi-01"><span class="Validform_checktip"></span></font>
                    </span>
                </dd>
                
<!--                 <dd>
                    <span class="dd_left">类型:</span>
                    <span class="dd_right" style="margin-top:5px;">
                        <input type="text" class="dtext" name="type" value="" id="type"/>
                        <font class="defi defi-01"><span class="Validform_checktip"></span></font>
                    </span>
                </dd> -->

                <dd>
                    <div id="reader_box"></div>
                    <span class="dd_right" id="str">
                    </span>
                </dd>

                <dd>
                    <div id="reader_box"></div>
                    <span class="dd_left">上传图片:</span>
                    <span class="dd_right">
                        <input type="file" name="file" id="file" onchange="load(this)" class='myfile'></input>
                        <div id="view"></div>
                        <div id="imgkey"></div>
                    </span>
                </dd>

             <!--    <dd>
               <span class="dd_left">排序号:</span>
               <span class="dd_right">
                   <input type="text" class="dtext" name="sort" id="sort" value="1"/>
                   <font class="defi defi-01"><span class="Validform_checktip"></span></font>
               </dd> -->

                <dd>
                    <span class="dd_left">图片链接地址:</span>
                    <span class="dd_right">
                        <input type="text" class="qtext"  name="href"  id="href"/>
                    </span>
                </dd>

               
                <input type="hidden" class="dtext" name="type" value="2" id="type"/>
                <dd style="margin-top: 10px;margin-bottom: 160px;"><input type="submit" class="so submit" value="提 交" /></dd>
                <input type="hidden" name="" value="<{:U('End/pcbanner')}>" id="jump">
            </dl>
        </form>
    </div>

<script type="text/javascript">
var imgkey = [];
function load(file) {
    var num=1;
    $('.imgbox').remove();
    if (file.files) {
        for (var i = 0; i < file.files.length; i++) {
            var reader = new FileReader();
            reader.readAsDataURL(file.files[i]);
            reader.onload = function(evt) {
                var imgbox=$('<div></div>');
                imgbox.addClass('imgbox');
                $('#view').append(imgbox);
                var imgs = $('<input type="image" />');
                imgs.attr('name','mum'+num);
                num++;
                imgs.appendTo(imgbox);
                imgs.attr('src', evt.target.result);
            }
        }
    }
}

$(function(){
    $(document).ready(function(){
        $('.submit').click(function(){
            var index = layer.load(1, {shade: [0.1,'#fff']});
        });

        $('#form').ajaxForm(function(data){
        //弹出ajax请求后的回调结果，data回调数据  onclick="sub()"
        if(data.code =="2000" ){ 
            layer.closeAll('loading');
            alert(data.message);
            var url = $('#jump').val();
            window.location.href = url; 
            // location.href=document.referrer; 
        }else{
            layer.closeAll('loading');
            alert(data.message);
        }
    });
    });
});


    $(document).on("change", "input[name=file]", logosub);
    function logosub() {
        //模拟form表单提交数据
        var filepath=$("input[name='file']").val();
        var extStart=filepath.lastIndexOf("."); 
        var ext=filepath.substring(extStart,filepath.length).toUpperCase(); 
        if(ext!=".jpeg"&&ext!=".jpg"&&ext!=".bmp"&&ext!=".png" &&ext!=".JPEG"&&ext!=".JPG"&&ext!=".BMP"&&ext!=".PNG"){ 
            alert("文件选择错误,图片类型必须是jpeg,jpg,bmp,png中的一种"); 
            return false; 
        }

        var index = layer.load(1, {shade: [0.1,'#fff']});
        var fileObj = document.getElementById("file").files[0];
        var FileController = '<{$SMART_URL}>/smart/banner/uploadBannerImage';
        var form = new FormData();
        form.append("bannerFile", fileObj);
        var xhr = new XMLHttpRequest();
        xhr.open("post", FileController, true);
        xhr.onload = function (json) {
            var obj = jQuery.parseJSON(json.target.responseText);
            console.log(obj);
            layer.closeAll('loading');
            if(obj.code == 2000){
                console.log(obj.data);
                // console.log(obj.data.key);return;
                var html = '<input type="hidden" name="pic" value="'+obj.data.picKey+'">';
                $('#imgkey').html(html);
                alert(obj.message);
            }
        };
        xhr.send(form);
    }

</script>
</body>
</html>
